// ==UserScript==
// @name         为semi-dropdown添加Trae打开项
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  增加Trae国际版打开项
// @author       自定义
// @match        https://www.doubao.com/*
// @grant        none
// @run-at       document-idle  // 文档加载完成后运行，避免DOM未就绪问题
// ==/UserScript==

(function() {
    'use strict';

    // 1. 定义要新增的li元素的HTML结构（与需求中指定的li完全一致）
    const newLiHtml = `
        <li role="menuitem" tabindex="-1" aria-disabled="false" class="semi-dropdown-item" data-testid="canvas-download-trae-cn-btn">
            <div>
                <div class="download-menu-item-title-Ddo5kR">
                    <span role="img" class="semi-icon semi-icon-default mr-8 text-16">
                        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24">
                            <path fill="currentColor" d="M14.152 21.5q-.4 0-.705-.27a1.18 1.18 0 0 1-.368-.684 32 32 0 0 0-.58-2.687q-.294-1.079-.725-1.763a3.3 3.3 0 0 0-1.105-1.1q-.684-.414-1.746-.664a31 31 0 0 0-2.62-.477 1.2 1.2 0 0 1-.716-.363q-.273-.3-.273-.716 0-.415.284-.715.285-.312.715-.363a26 26 0 0 0 2.641-.415q1.074-.24 1.768-.654a3.4 3.4 0 0 0 1.126-1.12q.442-.705.715-1.794.273-1.1.515-2.697.064-.426.358-.685.306-.27.716-.27t.705.27q.305.26.378.685.285 1.597.569 2.686.294 1.08.725 1.764.432.683 1.116 1.1.683.414 1.736.663a30 30 0 0 0 2.62.467q.442.072.715.373.285.3.284.706 0 .425-.284.736-.284.3-.726.342-1.557.177-2.63.425-1.074.24-1.778.654a3.3 3.3 0 0 0-1.126 1.12q-.432.706-.705 1.795a30 30 0 0 0-.516 2.697 1.1 1.1 0 0 1-.368.684q-.294.27-.715.27M6.366 9.078q-.525 0-.589-.54a18 18 0 0 0-.252-1.565q-.127-.57-.421-.861-.295-.301-.884-.446-.59-.146-1.641-.29Q2 5.291 2 4.793t.516-.58a24 24 0 0 0 1.683-.343q.61-.156.905-.435.294-.291.42-.84.127-.561.253-1.546.063-.55.59-.55.515 0 .589.529.126 1.037.252 1.618.137.581.431.871.295.281.895.415.6.136 1.662.28.23.022.379.187.147.165.147.394 0 .488-.505.581-1.083.177-1.694.343-.6.155-.894.446-.295.279-.421.84T6.956 8.56a.58.58 0 0 1-.2.373.58.58 0 0 1-.39.145"></path>
                        </svg>
                    </span>
                    <span>使用 Trae 国际版打开</span>
                </div>
                <span class="download-menu-item-tip-I2xE6S">下载后使用 AI 原生 IDE 继续开发</span>
            </div>
        </li>
    `;

    // 2. 核心函数：为目标semi-dropdown元素添加新li项
    function addTraeMenuItem(dropdownEl) {
        // 找到dropdown内部的ul列表（根据DOM结构，ul的class为semi-dropdown-menu）
        const targetUl = dropdownEl.querySelector('ul.semi-dropdown-menu');
        if (!targetUl) {
            console.log('未找到semi-dropdown内的ul列表，跳过');
            return;
        }

        // 检查是否已存在相同data-testid的li项（避免重复添加）
        const existingLi = targetUl.querySelector('li[data-testid="canvas-download-trae-cn-btn"]');
        if (existingLi) {
            console.log('已存在"使用Trae国际版打开"项，无需重复添加');
            return;
        }

        // 创建临时容器，将HTML字符串转为DOM元素
        const tempDiv = document.createElement('div');
        tempDiv.innerHTML = newLiHtml.trim(); // 去除首尾空格，避免多余文本节点
        const newLi = tempDiv.firstElementChild; // 获取li元素

        // 将新li添加到ul列表中（可根据需求调整位置，如prepend添加到开头）
        targetUl.appendChild(newLi);
        
        // 为新添加的li元素添加点击事件，点击后打开百度
        newLi.addEventListener('click', function() {
            window.open('https://www.baidu.com', '_blank');
        });
        
        console.log('成功添加"使用Trae国际版打开"菜单项');
    }

    // 3. 监听页面中semi-dropdown元素的出现（支持动态加载的元素）
    function observeSemiDropdown() {
        // 配置MutationObserver：监听子节点变化和属性变化
        const observerConfig = {
            childList: true,    // 监听子节点增减
            subtree: true,      // 监听后代节点（深层DOM）
            attributes: false,  // 无需监听属性变化（可根据需求开启）
            characterData: false
        };

        // 创建观察者实例
        const observer = new MutationObserver((mutations) => {
            // 遍历所有DOM变化
            mutations.forEach((mutation) => {
                // 情况1：子节点新增时，检查是否有semi-dropdown元素
                if (mutation.addedNodes.length) {
                    mutation.addedNodes.forEach((node) => {
                        // 只处理元素节点（排除文本节点、注释等）
                        if (node.nodeType === 1) {
                            // 检查当前节点是否是目标dropdown
                            if (node.classList.contains('semi-dropdown')) {
                                addTraeMenuItem(node);
                            }
                            // 检查当前节点的后代是否有目标dropdown（深层DOM）
                            const dropdownsInNode = node.querySelectorAll('.semi-dropdown');
                            dropdownsInNode.forEach(addTraeMenuItem);
                        }
                    });
                }
            });
        });

        // 启动观察者，监听整个文档（可根据需求缩小监听范围，如#app容器）
        observer.observe(document.body, observerConfig);
        console.log('已启动semi-dropdown监听');

        // 初始检查：页面加载完成后，检查已存在的semi-dropdown元素
        const existingDropdowns = document.querySelectorAll('.semi-dropdown');
        existingDropdowns.forEach(addTraeMenuItem);
    }

    // 4. 启动脚本（文档加载完成后执行）
    if (document.readyState === 'complete' || document.readyState === 'interactive') {
        observeSemiDropdown();
    } else {
        // 若文档未就绪，监听DOMContentLoaded事件后执行
        document.addEventListener('DOMContentLoaded', observeSemiDropdown);
    }
})();